<!-- 申请售后,申请退款都放在这个页面了 -->
<template>
  <view class="page after-sales-page black-ground">
    <div class="wrap">
      <div class="page-title">{{ order.status === 2 ? '申请退款 Refund' : '申请售后 After Sales' }}</div>

      <div class="title">
        <div class="title">
          {{ order.name }}
          <br />
          {{ order.enName }}
        </div>
      </div>
      <div class="title">订单状态 Order Status</div>
      <div class="te show-detail-tab" @click="showOrderInfo">
        <div class="left">
          {{ statusCn(order.status) }}
        </div>
        <div class="right">
          <uv-icon color="#fff" :name="isShowOrderInfo ? 'minus' : 'plus'" size="16rpx"></uv-icon>
        </div>
      </div>
      <div v-if="isShowOrderInfo">
        <div class="te">订单编号 Order Number</div>
        <div class="te">{{ order.number }}</div>
        <div class="te">下单时间 Order Time</div>
        <div class="te">{{ order.createTime }}</div>
      </div>
      <!-- 取消的订单显示这些 -->
      <div v-if="order.status == 7">
        <div class="title">退款金额 Refund Amount</div>
        <div class="te">¥ {{ order.payPrice }}</div>
      </div>
      <div class="title" v-if="order.status !== 2">
        请到美术馆前台退货退款。 <br />
        Please visit the front desk of the gallery to return the product for a refund.
      </div>
    </div>
    <div class="bottom-control-box">
      <div class="bottom-control-container">
        <div class="wrap">
          <div class="left-box" @click="backPage">
            <div class="div">取消 Cancel</div>
          </div>
          <div
            class="bottom-control-btn"
            :class="{ disabled: !loaded || info.skuVos.inventory === 0 }"
            @click="confirmRefund"
          >
            确认 Confirm
          </div>
        </div>
        <bottom-safe-area></bottom-safe-area>
      </div>
      <div>
        <div style="height: 100rpx"></div>
        <bottom-safe-area></bottom-safe-area>
      </div>
    </div>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch, computed } from 'vue'
import { useStore } from 'vuex'
import { onLoad } from '@dcloudio/uni-app'
const store = useStore()

import { orderInfo, orderRefund } from '@/utils/api/order'

let id: number | string = ''
// 1.待付款 2.待发货 3.待收货 4.已退款 5.已完成 6.退款异常 7.已取消
const statusCn = (status: number) => {
  const statusMap: Record<number, string> = {
    1: '未支付  Unpaid',
    2: '已支付  Paid',
    3: '待收货  Delivered',
    4: '已退款  Refunded',
    5: '已完成  Completed',
    6: '退款异常  RefundException',
    7: '已取消  Cancelled'
  }
  return statusMap[status] || '未知状态'
}

let isShowOrderInfo = ref<boolean>(true)
const showOrderInfo = () => {
  isShowOrderInfo.value = !isShowOrderInfo.value
}

const backPage = () => {
  uni.navigateBack()
}
const confirmRefund = async () => {
  if (order.value.status === 2) {
    const { code, data } = await orderRefund({ id })
    if (code !== 200) return
    backPage()
  } else {
    backPage()
  }
}
let order = ref<any>({})
onLoad(async (opt) => {
  id = opt.id
  const res = await orderInfo({
    id: opt.id
  })
  if (res.code === 200) {
    order.value = res.data
  }
})
</script>

<style lang="scss" scoped>
.show-detail-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44rpx;
}
.bottom-control-box {
  .bottom-control-container {
    background: #000;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 100;
    .wrap {
      display: flex;
      padding: 20rpx 0;
      justify-content: space-between;
      height: 100rpx;
      .left-box {
      }
      .bottom-control-btn {
        color: #fff;
      }
      .disabled {
        opacity: 0.8;
      }
    }
  }
}
</style>
